<div
  style="
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: color-mix(in srgb, red 50%, transparent 50%);
  "
>
  <div
    style="
      width: auto;
      height: auto;
      flex: 1;
      background-color: color-mix(in srgb, yellow 50%, transparent 50%);
    "
  ></div>

  <div
    style="
      width: auto;
      height: auto;
      flex: 0.5;
      display: flex;
      padding: 20px;
      align-items: stretch;
      background-color: color-mix(in srgb, blue 50%, transparent 50%);
    "
  >
    <div
      style="
        height: 44px;
        width: auto;
        flex: 1;
        background-color: color-mix(in srgb, pink 50%, transparent 50%);
      "
    ></div>
    <div
      style="
        height: 44px;
        width: auto;
        flex: 1;
        align-self: flex-end;
        background-color: color-mix(in srgb, hotpink 50%, transparent 50%);
      "
    ></div>
  </div>
</div>
